<template>
  <el-card shadow="never" class="box-card">
    <template #header>
      <div class="card-header">
        <span>修改信息</span>
      </div>
    </template>
    
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="login-form"
    >
      <el-form-item label="Avatar">
        <AvatarUploader></AvatarUploader>
      </el-form-item>
      <el-form-item label="Nickname" prop="nickname">
        <el-input v-model="ruleForm.nickname"/>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="ruleForm.email"/>
      </el-form-item>
      <el-button id="submit-btn" type="primary" plain round @click="submitForm()">Submit</el-button>
    </el-form>
  </el-card>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
import AvatarUploader from '@/components/AvatarUploader'
export default {
  name: 'MyUpd',
  components: {
    AvatarUploader
  },
  data () {
    let validateNickName = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9]{4,20}$/
      if (value === '') {
        callback(new Error('请输入昵称'))
      } else if (!reg.test(value)) {
        callback(new Error('昵称必须为4-20位字母或数字组合'))
      } else {
        callback()
      }
    }
    let validatePass = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9]{4,12}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须为4-12位字母或数字组合'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleFormRef.validateField('checkPass');
        }
        callback()
      }
    }
    let validateEmail = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,4}$/
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!reg.test(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        nickname: this.$store.state.nickname,
        password: this.$store.state.password,
        email: this.$store.state.email,
        token: this.$store.state.token
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        nickname: [
          { validator: validateNickName, trigger: 'blur' }
        ],
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
      }
  }},
  methods: {
    submitForm() {
      if (!this.$refs.ruleFormRef) return
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          api.updateUser(
            this.ruleForm
          ).then((res) => {
            if (res.code < 300) {
              this.$store.commit('setNickname', this.ruleForm.nickname)
              this.$store.commit('setEmail', this.ruleForm.email)
              this.$store.commit('pageChanged')
              ElMessage({
                message: res.message,
                type: 'success',
              })
            } else {
              ElMessage.error(res.message)
            }
          })
        } else {
          ElMessage.error('error submit!')
          return false;
        }
      });
    },
  },
  watch: {

  },
  mounted () {
  }
}
</script>

<style scoped>
#email-row {
  width: 100%;
}
#submit-btn {
  margin-top: 20px;
  margin-left: 70px;
  width: 320px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-family: 'PingFang SC';
  font-weight: 300;
  font-size: 24px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  /* opacity: 0.8; */
}
</style>
